<template>
    <div class="alert" v-if="visible">
        <div class="alert-body">
            <img class="body-bg" src="http://img.douluotianxia.com/img/alert.png" alt="背景">
            <van-icon name="close" class="close-icon" @click="$emit('show')"/>
            <div class="title div-z">确认地址</div>
            <div class="alert-content div-z">
                <um-paner :iconUrl="iconInfo.cityIcon" :name="cityName" tipText="选择城市" @show="showCity"/>
                <um-paner :iconUrl="iconInfo.schoolIcon" :name="schoolName" tipText="选择学校" @show="goSchool"/>
            </div>
            <div class="alert-btn div-z" @click="handleTel">确定</div>
        </div>
        <um-area @cancel="showCity" @changeCity="changeCity" :visibleArea="visibleArea"/>
        <van-action-sheet :show="visibleSchool" @close="visibleSchool = false">
            <van-picker
                :columns="schoolList"
                value-key="schoolName"
                show-toolbar
                title="选择学校"
                @cancel="visibleSchool = !visibleSchool"
                @confirm="schChange"
            />
        </van-action-sheet>
    </div>
</template>
<script>
import Paner from '@/components/choose.vue';
import Area from '@/components/area.vue';
const addIcon = require("@static/images/add.png");
const cityIcon = require('@static/images/city-icon.png');
const schoolIcon = require('@static/images/school-icon.png');
export default {
    props: {
        visible: false
    },
    components: {
       'um-paner': Paner,
       'um-area': Area
    },
    data() {
        return {
            addIcon,
            visibleArea: false,
            visibleSchool: false,
            cityName: '',
            schoolName: '',
            schoolList: [],
            iconInfo: {
                cityIcon,
                schoolIcon
            }
        }
    },
    watch: {
        visible(v) {
            if (v) {
                this.schoolName = '';
            }
        }
    },
    methods: {
        handleTel() {
            if (!this.$getStorage('jobCity')) {
                wx.showToast({
                    title: "请选择城市", //提示的内容,
                    icon: "none", //图标,
                });
                return;
            }
            if (!this.schoolInfo || !this.schoolInfo.schoolName) {
                wx.showToast({
                    title: "请选择学校", //提示的内容,
                    icon: "none", //图标,
                });
                return;
            }
            this.$setStorage('schoolInfo', this.schoolInfo);
            wx.navigateTo({
                url: '/pages/shop/index/main'
            });
        },
        showCity () {
            this.visibleArea = !this.visibleArea;
        },
        goSchool () {
            this.visibleSchool = !this.visibleSchool;
        },
        changeCity(e) {
            const cityInfo = e.values[1];
            this.$setStorage('jobCity', cityInfo);
            this.cityName = cityInfo && cityInfo.name || '';
            this.$api.getSchoolListByArea({ areaId: cityInfo.code }).then(res => {
				this.schoolList = res.data.schoolList;
			});
            this.showCity();
        },
        schChange(e) {
            const schoolInfo = e.target.value;
            this.schoolName = schoolInfo && schoolInfo.schoolName || '';
            this.schoolInfo = schoolInfo;
            if (schoolInfo.isPass == 2) {
                this.$emit("submit");
            }
            this.goSchool();
        }
    }
}
</script>
<style>
.alert {
    height: 100%;
    background: rgba(0,0,0,0.57);
    position: relative;
}
.alert-body {
    width: 300px;
    height: 380px;
    box-shadow: 0 0 38px 0 rgba(165,165,165,0.18);
    position: absolute;
    top: 45%;
    left: 50%;
    transform: translate(-50%, -50%);
}
.body-bg {
    width: 300px;
    height: 380px;
    position: absolute;
}
.alert-content {
    width: 254px;
    height: 184px;
    border-radius: 4px;
    background: #FFFFFF;
    box-shadow: 0 0 38px 0 rgba(165,165,165,0.18);
    margin: 40px auto 0px;
}
.alert-bnt {
    background-image: linear-gradient(-197deg, #7F74FC 0%, #55AEFD 100%);
    box-shadow: 0 6px 27px 0 rgba(32,36,161,0.27);
}
.close-icon {
    font-size: 30px;
    color: #fff;
    position: absolute;
    bottom: -50px;
    left: 50%;
    margin-left: -15px;
}
.title {
    margin-top: 47px;
    font-size: 30px;
    color: #FDFAF9;
    text-align: center;
}
.grey {
    background: #f7f7f7;
}
.tips {
    font-size: 12px;
    color: #C1C4C9;
    line-height: 22px;
    padding: 70px 30px 0px;
    text-align: center;
}
.content-logo {
    width: 92px;
    height: 92px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 9px 32px 0 rgba(113,103,247,0.20);
    text-align: center;
    position: absolute;
    top: -30px;
    left: 81px
}
.logo {
    width: 40px;
    height: 42px;
    margin: 25px auto 0px;
}
.tel {
    font-size: 18px;
    color: #3BB8FD;
    text-align: center;
    margin-top: 15px;
}
.div-z {
    position: relative;
    z-index: 9;
}
.alert-btn {
    width: 254px;
    height: 40px;
    line-height: 40px;
    border-radius: 20px;
    font-size: 14px;
    margin: 20px auto;
    color: #fff;
    background-image: linear-gradient(-197deg, #7F74FC 0%, #55AEFD 100%);
    box-shadow: 0 6px 27px 0 rgba(32,36,161,0.27);
    text-align: center;
}
</style>